<script setup lang='ts'>
	import {ref, onMounted} from 'vue'
	import {useRoute, useRouter} from 'vue-router'
	import {
		useMessage,
	} from 'naive-ui'


	import {queryOrder, queryOrderSnapshot} from "@/api/AliPay";
	import {orderReq, OrderSnapshotsInfo} from "@/typings/pay";

	const message = useMessage()
	const route = useRoute()
	const router = useRouter()
	const show = ref<boolean>(false)
	const {orderId} = route.params as { orderId: string }
	const orderSnapshotsInfo = ref<OrderSnapshotsInfo | null>(null)

	onMounted(async () => {
		const res = await querySnapshot({orderId})
		if (res) {
			orderSnapshotsInfo.value = res[0]
			console.log(orderSnapshotsInfo.value)
		}
	})

	async function querySnapshot(options: Partial<orderReq>) {
		return await queryOrderSnapshot(options)
	}


	const toChatIndex = async (e: MouseEvent) => {
		router.push('/chat')
	}

</script>
<template>
	<NModal class="payment-success">
		<div class="page-container">
			<div class="payment-success">
				<div class="icon-wrapper">
					<span class="iconfont icon-success"></span>
				</div>
				<div class="title">订单详情</div>
				<div class="order-info">
					<div class="order-number">订单号： {{orderSnapshotsInfo && orderSnapshotsInfo.orderId}}</div>
					<div class="order-time">产品id：{{orderSnapshotsInfo &&  orderSnapshotsInfo.productId}}</div>
					<div class="order-time">总支付金额：￥{{ orderSnapshotsInfo && orderSnapshotsInfo.totalPrice}}</div>
					<div class="order-time">商品单价：￥{{ orderSnapshotsInfo && orderSnapshotsInfo.currentUnitPrice}}</div>
					<div class="order-time">商品数量：{{ orderSnapshotsInfo && orderSnapshotsInfo.quantity}}</div>
					<div class="order-time">订单创建时间：{{ orderSnapshotsInfo && orderSnapshotsInfo.createTime}}</div>
					<div class="order-time">聊天次数：{{ orderSnapshotsInfo && orderSnapshotsInfo.messageCredits}}</div>
					<div class="order-time">机器人个数：{{ orderSnapshotsInfo && orderSnapshotsInfo.chatbots}}</div>
					<div class="order-time">聊天字符：{{orderSnapshotsInfo &&  orderSnapshotsInfo.characters}}</div>
				</div>
				<div class="actions">
					<button class="btn btn-light" @click="toChatIndex">返回首页</button>
				</div>
			</div>
		</div>
	</NModal>
</template>

<style scoped>
	.page-container {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 500px;
	}

	.payment-success {
		background-color: #fff;
		border-radius: 10px;
		padding: 30px;
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
	}

	.icon-wrapper {
		font-size: 50px;
		color: #52c41a;
		margin-bottom: 20px;
	}

	.title {
		font-size: 24px;
		font-weight: bold;
		margin-bottom: 20px;
	}

	.order-info {
		margin-bottom: 20px;
	}

	.order-number, .order-time {
		font-size: 14px;
		color: #909399;
	}

	.pay-amount {
		font-size: 36px;
		font-weight: bold;
		color: #52c41a;
		margin-bottom: 20px;
	}

	.actions {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.btn {
		display: block;
		flex: 1;
		margin: 5px;
		padding: 10px 20px;
		border-radius: 5px;
		font-size: 14px;
		font-weight: bold;
		transition: all 0.3s ease;
		cursor: pointer;
	}

	.btn-primary {
		color: #fff;
		background-color: #52c41a;
		border: none;
	}

	.btn-primary:hover {
		background-color: #389e0d;
	}

	.btn-light {
		color: #909399;
		background-color: #f0f0f0;
		border: none;
	}

	.btn-light:hover {
		background-color: #d9d9d9;
	}
</style>



